<html>
  <head>
    <title>HTML 文档结构</title>
    <!-- <link rel="stylesheet" href="index.css" /> -->
  </head>
  <body>
    <!-- vfdsfs -->
    <div class="main">
      <div class="row">
        <input class="input" type="text" id="inputtext" onkeypress="keyup(event)"/>
        <input type="button" name="bt" value="添加" onclick="handleClick(event)" />
        <input type="button" id="button2" value="删除" onclick="handleDelet(event)"/>
      </div>
      <div id = "todogroup">
        <!-- <div id = "todo0">
        <input type = "checkbox" name = "todocheck">吃饭 <button type = "button" onclick = "deletByIndex(0)">删除</button></div>
        <div>睡觉</div> -->
      </div>
      <!-- <span style="color: rgb(0, 0, 252)">
        asd&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rts
      </span> -->
    </div>
  </body>
  <script lang="javascript">

    var intCnt = 0;
    function init() {
      console.log('xxxx');
      document.getElementById("button2").onclick = handleClick;
      console.log('xxxxxxx');
    }
    // console.log('xxxxxxx');
    function keyup(e){
      if(e.key == "Enter")
        handleClick(e);
    }

    function handleClick(e) {
      console.log('handleClick');
      console.log(e);

      // var temp=document.getElementsByName("bt");
      // console.log(temp);

      // var temp = getValue();
      // console.log(temp.value);
      // var div = document.createElement("div");
      // div.innerText = temp;
      // document.getElementById("todogroup").append(div);
      // document.getElementsByClassName("main")[0].style = "background-color: #33333333"
      //document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
      var temp = getValue();
      document.getElementById("todogroup").innerHTML += "<div class = 'item' id = 'todo"+ intCnt
        + "'><input type = 'checkbox' name = 'todocheck'><div class = 'item-value'>"
        + temp + "</div><button class = 'item-del' type = 'button' onclick = 'deletByIndex(" + intCnt + ")'>删除</button></div>";
      document.getElementById("inputtext").value = "";
      intCnt++;

    }
    function handleDelet(e){
      var intnow = 0;
    }

    init();
    function getValue(){
      var temp = document.getElementById("inputtext");
      console.log(temp.value);

      return temp.value;
    }

    function deletByIndex(index){
      document.getElementById("todo" + index).remove();
    }

  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .main {
      /* background-color: aqua;
      width: 200px;
      height: 200px; */

      padding : 8px;
      border: 1px solid #333333;
      border-radius: 8px;
    }
    .row {
      display: flex;
    }

    .item{
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;
      background-color: #ffffff;
    }

    .item:hover{
      background-color: #dbd6d6;
    }
    .item-value{
      flex-grow: 1;
      color: #000000;
    }

    .item-del{
      color: aliceblue;
      background-color: rgb(10, 94, 239);
      border: 0px;
      opacity: 0;

    }
    .item-del:hover{
      box-shadow: 0px 0px 10px #17ebd9;
      border: 2px solid rgb(10, 94, 239);
    }

    .item:hover .item-del{
      opacity: 1;
    }

    .input{
      padding: 8px;
      outline: none;
      border: 2px solid #9a9797;
    }

    .input:focus{
      box-shadow: 0px 0px 10px #3762d9;
      border: 2px solid #3762d9;
    }
  </style>
</html>
